<template>
  <div class="preorder">
    <el-table :data="currentchargerproduct">
      <el-table-column prop="date"
                       align='center'
                       label="充值产品">
        <template v-slot='scoped'>
          <img style='vertical-align: middle'
               width="120px"
               :src="scoped.row.imageUrl"
               alt="">
          <br><span style="color: red; font-weight: bold">{{scoped.row.productName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price"
                       align='center'
                       label="单价">
      </el-table-column>
      <el-table-column prop="address"
                       align='center'
                       label="数量">
        <template v-slot='{row}'>
          <el-input-number v-model="num"
                           @change="handleChange(row)"
                           size="mini"
                           :min="1"
                           :max="10"
                           label="描述文字"></el-input-number>
        </template>

      </el-table-column>
      <el-table-column prop="address"
                       align='center'
                       label="小计">
        <template>
          {{totalfee}}
        </template>
      </el-table-column>
    </el-table>
    <div class='money'>
      <span>实付价格:</span>{{totalfee}}元<br>
      <el-button type="primary"
                 @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
  import * as api from "../../../api"
  import { mapState, mapActions, mapMutations } from 'vuex'
  export default {
    data() {
      return {
        preordertable: [],
        //计数器的统计数量
        num: 1,

      }
    },
    components: {
    },
    methods: {
      ...mapMutations(['SET_ORDERID']),
      handleChange(row) {
        console.log(row);
      },
      submit() {
        this.$confirm('此操作将购买vip, 是否继续?', '提示', {
          confirmButtonText: '提交订单',
          cancelButtonText: '取消订单',
          type: 'warning',
        }).then(() => {
          let product_id = this.currentchargerproduct[0].product_id
          let quantity = this.num
          //发起请求提交订单
          api.getpreorders(product_id, quantity).then(res => {
            console.log(res);
            if (res.data.state) {
              //订单创建成功保存订单_id
              this.SET_ORDERID(res.data.order_id)
              this.$message({
                type: 'success',
                message: '提交订单成功'
              });
              ////2.跳转到支付页面,根据订单号,发送请求,获取订单详情
              this.$router.push({ name: "pay" })
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(() => {
          console.log(22);
        })
      }

    },
    computed: {
      ...mapState(['currentchargerproduct']),
      //计算总价
      totalfee() {
        return this.num * this.currentchargerproduct[0].price
      }

    },
  }

</script>

<style lang='scss' scoped>
  .money {
  	width: 500px;
  	height: 200px;
  	border: 3px solid red;
  	position: absolute;
  	right: 40px;
  	top: 300px;
  	span {
  		font-size: 20px;
  	}
  }
</style>
